<template>
  <div class="raiders" ref="homePage">
    <div class="bj">
      <van-nav-bar title="精彩攻略" left-arrow @click-left="onClickLeft" />
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <!-- <div style="position: fixed;bottom: 5%;right: 4%;display: flex;align-items: center;justify-content: center;" @click="UploadRaiders">
      <div style="position: absolute;background: white;width: 40px;height: 40px;border-radius: 15px;"></div>
      <van-icon name="add" style="font-size: 60px !important;" />
    </div> 点击跳转上传攻略，目前不需要-->
    <div class="Raiders_top">
      <van-swipe :autoplay="0">
        <van-swipe-item v-for="(image, index) in titledatalist.FocusImgs" :key="index">
          <img width="100%" height="100%" :src="image.ImgSrc" />
          <div class="wenzi">
            <div style="background: #eaeaea;width: 100%;height: 100%;position: absolute;opacity:1;"></div>
            <div class="wenzi_box">
              <img src="http://192.168.1.227:823/public/statics/img/default.jpg" />
              <div class="wemzi_img">
                <span>李李李</span>
                <p class="wemzi_txt">烟台好玩的地方排行榜-日照旅游攻略</p>
              </div>
              <div>
                <span style="font-size: 14px;color: #505050;">999浏览</span>
               </div>
            </div>

          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div v-show="datalist.length == 0"  class="wudingdan" >
        <van-icon name="description"/>
        <p>亲,暂无相关数据哦</p>
    </div>
    <div v-show="datalist.length != 0" class="Raiders_bottm">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="ArticleList">
        <div class="bottm_div" @click="RaidersDetails(itme.artSN)" v-for="(itme,index) in datalist" :key="index">
          <div class="div_img">
            <img width="100%" height="100%" :src="itme.Cover" />
          </div>
          <div class="div_content">
            <p class="div_txt">{{itme.Title}}</p>
            <div class="div_bottm">
              <div>
                <img :src="itme.AuthorAvatarUrl" />
                <span style="margin-left: 5px;color: #505050;">{{itme.Author}}</span>
              </div>
              <span style="color: #505050;">{{itme.ViewNum}}浏览</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
  import {
    ArticleList
  } from '@/api/home.js'
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        images: [
          'http://192.168.1.227:823/upload/images/p/201911/20191120144939FCAEVDY434.jpg',
          'https://resource.sz-trip.com/wximg/Nighttour/Nighttour001.jpg',
          'https://resource.sz-trip.com/uploads/20191022/122de6bfc4afcd434392e9e5d50f4824.jpg'
        ],
        titledatalist:[],
        datalist: [],
        loading: false, //控制上拉加载的加载动画
        finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
        // isLoading: false, //控制下拉刷新的加载动画
        totalPage: 0,
        pageNumber: 0, //自定义一个变量

      }
    },
    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
      this.ArticleList();
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },

      RaidersDetails(artSN){
        this.$router.push({
          path: "/Raiders/RaidersDetails",
          query:{
            artSN:artSN,
          }

        })
      },
      UploadRaiders() {
        this.$router.push({
          path: "/Raiders/UploadRaiders",

        })
      },
      ArticleList() {
        let data = {
          "PageNo": this.pageNumber + 1,
          // Keywords:"",//搜索
          // Tags:"",//赛选
        }
        ArticleList(data).then(res => {
          console.log(res)
          this.titledatalist = res.List[0]
          console.log(this.titledatalist)
          this.totalPage = res.PageCount;
          if (res.List.length > 0) {
            this.datalist = this.datalist.concat(res.List);
          } else {
            this.datalist = res.List
          }
          this.loading = false;
          this.pageNumber++;
          if (this.pageNumber >= this.totalPage) {
            this.finished = true;
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  .raiders {
    background: white;

    .bj {
      .van-icon {
        color: white !important;
        z-index: 10;
      }
    }


    .Raiders_top {
      width: 100%;
      height: 244px;
      background: #cccccc;
      display: flex;
      align-items: center;
      justify-content: center;
       .van-swipe {
         width: 100%;
         height: 244px;
         z-index: 9;

         .wenzi {

           position: relative;
           top: -66px;
           height: 60px;
           color: white;
           display: flex;
           align-items: center;
           // flex-direction: column;
           .wemzi_txt{
             position: relative;
             width: 100%;
             color: #919291;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
             // padding: 5px 0px;
           }
           .wenzi_box{
             position: relative;
             width: 100%;
             height: 100%;
             display: flex;
             justify-content: space-around;
             align-items: center;
             padding: 0 10px;
             img{
               width: 40px;
               height: 40px;
               border-radius: 30px;
               overflow: hidden;
               // margin-right: 10px;
             }
             .wemzi_img{
               display: flex;
               width: 60%;
               // align-items: center;
               // margin-left: -20px;
               flex-direction: column;
               span{
                 color: #505050;
                 font-size: 14px;
               }
             }
           }
         }

         // span {
         //   position: relative;
         // }

         .van-swipe__indicators{
           bottom: 5px !important;
         }
       }
    }

    .Raiders_bottm {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: 10px;

      .van-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .van-list__finished-text{
          width: 100%;
        }
        .bottm_div {
          width: 45%;
          height: 200px;
          display: flex;
          flex-direction: column;
          color: white;
          background: #f4f4f4;
          margin-bottom: 20px;

          // margin: 20px;
          .div_img {
            padding: 5px;
            width: 100%;
            height: 70%;
          }

          .div_content {
            width: 100%;
            height: 35%;
            display: flex;
            flex-direction: column;
            padding: 0 5px;

            .div_txt {
              width: 100%;
              // height: 50%;
              // line-height: 15px;
              color: #919291;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .div_bottm {
              display: flex;
              justify-content: space-between;
              align-items: center;

              div {
                display: flex;
                align-items: center;
              }

              img {
                width: 30px;
                height: 30px;
                border-radius: 30px;
                overflow: hidden;
              }
            }
          }
        }
      }


    }


  }
</style>
